<template>

  <!-- 搜索栏 -->
   <div class="title" style=""> 

     <p style="font-size: 1.2em;line-height: 100%; margin: 0;text-align: center;">扩容箱一览</p> <br>

      <el-form :inline="true" :model="searchName" class="form" style="margin: -14px 0px 0px 0px;" >
        <el-form-item label="材料名称">
          <el-input v-model="searchName.name" placeholder="请输入材料名称"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>


      </el-form>
   </div>


<!-- 表格 -->
  <el-table :data="materialList" style="width: 100% ;height: 86%;margin: -14px 0px 0px 0px;" >

      <el-table-column fixed prop="materialmage" label="物品图片" width="100" >
             <template #default="scope">
              <img :src="scope.row.materialmage" width="50">
            </template>
      </el-table-column>

      <el-table-column prop="materialName" label="材料名称" width="200" />

      <el-table-column prop="totalQuantityNeeded" label="特勤处需要总数" width="160" />
      <el-table-column prop="unitPrice" label="单个价格" width="auto" />
      <el-table-column prop="totalValue" label="总价格" width="auto" />
    </el-table>

         <!-- 分页组件Pagination -->
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style=" height: 33px; margin-top: 2px;"
    />



</template>
<script setup lang="ts">
import { onMounted ,ref} from "vue";
import type {PaginationParam,MaterialModelArray} from "@/api/model/model"
 import {queryMaterialPageApi} from "@/api/materials";






const materialList = ref<MaterialModelArray>([])
const pagination = ref<PaginationParam>({currentPage: 1, pageSize: 20, total: 0})


type SearchEmpModel = {
  name: string, 

}
//定义搜索栏表单封装对象
const searchName = ref<SearchEmpModel>({
  name: ''

})
const search = async () => {
  const result = await queryMaterialPageApi(
    pagination.value.currentPage,
    pagination.value.pageSize
  )
  console.log(result);
  
 console.log("bbbbbbbbb"+result);
  if(result.code) {
    console.log(result);
    materialList.value= result.data.records
    console.log( "result"+result.data.records)
    console.log( "materialList"+materialList.value);
    
    pagination.value.total = result.data.total //总记录数
  }
}

//每页展示记录数变化时触发
const handleSizeChange = (val: number) => { //val: 记录数 50
  pagination.value.pageSize = val
  search()
}

//页码变化时出发
const handleCurrentChange = (val: number) => { //val: 页码
  pagination.value.currentPage = val
  search()
}



onMounted(()=>{
  
search()
})

</script>

<style scoped>
    body{
        background-color: #bfa;
    }


</style>